﻿@{
    ViewData["Title"] = "新增配置信息";
    Layout = "~/Views/Shared/_LayoutNone.cshtml";
}
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color:red">*</span> 类型</label>
        <div class="layui-input-block">
            <select id="type_id" name="type_id" lay-verify="required" lay-filter="select_type_id">
                <option value="">选择类型</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color:red">*</span> 选项名称</label>
        <div class="layui-input-block">
            <input type="text" id="info_name" name="info_name" maxlength="255" lay-verify="required" placeholder="请输入选项名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="type1">
        <label class="layui-form-label"><span style="color:red">*</span> 选项值</label>
        <div class="layui-input-block">
            <input type="text" id="info_value" name="info_value" maxlength="255" placeholder="请输入请输入选项值（短内容）" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="type2" style="display: none;">
        <label class="layui-form-label"><span style="color:red">*</span> 选项值</label>
        <div class="layui-input-block">
            <textarea id="edit_content" name="edit_content" placeholder="请输入选项值（长内容）" autocomplete="off" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item" id="type3" style="display: none;">
        <label class="layui-form-label"><span style="color:red">*</span> 选项值</label>
        <div class="layui-input-block">
            <div class="layui-upload-drag" id="cover-upload-drag">
                <i class="layui-icon"></i>
                <p>点击上传，或将图片拖拽到此处</p>
                <label style="color:#dc2828">*图片尺寸建议:500×500(px)以上</label>
            </div>
        </div>
    </div>
    <div class="layui-form-item" id="type4" style="display: none;">
        <label class="layui-form-label"><span style="color:red">*</span> 选项值</label>
        <div class="layui-input-block">
            <input type="checkbox" lay-verify="required" lay-filter="switch_is_open" name="switch_is_open" lay-skin="switch" lay-text="显示|否" checked>
            <input type="hidden" name="is_open" id="is_open" value="true" />
        </div>
    </div>
    <div class="layui-form-item" id="type5" style="display: none;">
        <label class="layui-form-label"><span style="color:red">*</span> 链接地址</label>
        <div class="layui-input-block">
            <input type="text" id="ext_link" name="ext_link" maxlength="255" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="type6" style="display: none;">
        <label class="layui-form-label"><span style="color:red">*</span> 选项值</label>
        <div class="layui-input-block">
            <textarea id="ext_desc" name="ext_desc" placeholder="请输入代码" autocomplete="off" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color:red">*</span> 排序</label>
        <div class="layui-input-block">
            <input type="text" id="sort_num" name="sort_num" lay-verify="required" placeholder="请输入排序" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">说明</label>
        <div class="layui-input-block">
            <textarea id="info_tips" name="info_tips" placeholder="请输入说明" autocomplete="off" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="hidden" id="parent_id" name="parent_id" value="@ViewContext.HttpContext.Request.Query["parent_id"]">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
    </div>

</div>

<script src="~/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' // 静态资源所在路径
    }).extend({
        index: '/lib/index' // 主入口模块
    }).use(['index', 'layedit', 'laydate', 'form', 'upload', 'laydate'], function () {
        var $ = layui.$
            , form = layui.form
            , admin = layui.admin
            , upload = layui.upload
            , layedit = layui.layedit
            , laydate = layui.laydate
            , layedit = layui.layedit;

        // 默认加载
        $(function () {
            loading = layer.load(2, {
                shade: [0.2, '#000']
            });

            // 类型
            admin.req({
                url: '/settingtypes/select'
                , done: function (res) {
                    layer.close(loading);
                    $.each(res.data, function (i, item) {
                        $("#type_id").append("<option value=" + item.type_id + ">" + item.type_name + "（" + item.type_remark + "）</option>");
                    });
                    layui.form.render('select');
                }
            });

        });

        // 初始化编辑器
        var content_edit = layedit.build('edit_content');

        // 上传参数设置
        layedit.set({
            uploadImage: {
                url: '/upload/uploadimg?catalogue=service&open_breviary=true',
                accept: 'image',
                headers: {
                    'RequestVerificationToken': csrfToken
                },
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|bmp|jpeg',
                size: 1024 * 10 * 2,  // 图片最大支持20M
                done: function (data) {
                    // console.log(`data=${JSON.stringify(data)}`);
                }
            },
            uploadVideo: {
                url: '/upload/uploadfile',
                accept: 'video',
                headers: {
                    'RequestVerificationToken': csrfToken
                },
                acceptMime: 'video/*',
                exts: 'mp4|flv|avi|rm|rmvb',
                size: 1024 * 10 * 10, // 视频最大支持100M
                done: function (data) {
                    // console.log(`data=${JSON.stringify(data)}`);
                }
            }
            , uploadFiles: {
                url: '/upload/uploadfile',
                accept: 'file',
                headers: {
                    'RequestVerificationToken': csrfToken
                },
                acceptMime: 'file/*',
                size: 1024 * 10 * 10, // 文件最大支持100M
                autoInsert: true,
                done: function (data) {
                    // console.log(`data=${JSON.stringify(data)}`);
                }
            }
            , rightBtn: {
                type: "layBtn",
                customEvent: function (targetName, event) {
                }
            }
            , backDelImg: true
            , devmode: true
            , autoSync: true
            , onchange: function (content) {
                // console.log(`content=${JSON.stringify(content)}`);
            }
            , codeConfig: {
                hide: false,
                default: 'javascript',
                encode: true
                , class: 'layui-code'
            }
            , quote: {
                style: ['Content/css.css'],
            }
            , customlink: {
                title: '自定义链接'
                , href: location.pathname
                , onmouseup: ''
            }
            //, facePath: ''
            , devmode: true
            , videoAttr: 'preload="none" '
            , height: '500px'
        });

        // 上传图片至服务端
        upload.render({
            elem: '#cover-upload-drag'
            ,headers: {
                'RequestVerificationToken': csrfToken
            }
            , url: '/upload/uploadimg?catalogue=service&open_breviary=true'
            , done: function (res) {
                // console.log(`res=${JSON.stringify(res)}`);
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                $("#cover-upload-drag").html("<img style='max-width:200px;max-height:150px' src='" + res.data.src + "'>");
                $("#info_path").val(res.path);
            }
        });

        // 监听类型
        form.on('select(select_type_id)', function (data) {
            if (data.value == 1) {
                $("#type1").show();
                $("#type2").hide();
                $("#type3").hide();
                $("#type4").hide();
                $("#type5").hide();
                $("#type6").hide();
            } else if (data.value == 2) {
                $("#type1").hide();
                $("#type2").show();
                $("#type3").hide();
                $("#type4").hide();
                $("#type5").hide();
                $("#type6").hide();
            } else if (data.value == 3) {
                $("#type1").hide();
                $("#type2").hide();
                $("#type3").show();
                $("#type4").hide();
                $("#type5").hide();
                $("#type6").hide();
            } else if (data.value == 4) {
                $("#type1").hide();
                $("#type2").hide();
                $("#type3").hide();
                $("#type4").show();
                $("#type5").hide();
                $("#type6").hide();
            } else if (data.value == 5) {
                $("#type1").show();
                $("#type2").hide();
                $("#type3").hide();
                $("#type4").hide();
                $("#type5").show();
                $("#type6").hide();
            } else if (data.value == 6) {
                $("#type1").show();
                $("#type2").hide();
                $("#type3").hide();
                $("#type4").hide();
                $("#type5").hide();
                $("#type6").show();
            }
        });

        // 监听指定开关
        form.on('switch(switch_is_open)', function (data) {
            if (this.checked) {
                $("#is_open").val(true);
            } else {
                $("#is_open").val(false);
            }
        });

        // 监听提交
        form.on('submit(layuiadmin-app-form-submit)', function (data) {
            data.field.info_content = layedit.getContent(content_edit);
            var index = parent.layer.getFrameIndex(window.name);

            if (data.field.type_id == 2 && !data.field.info_content) {
                layer.msg('请填写内容');
                return false;
            }

            loading = layer.load(2, {
                shade: [0.2, '#000']
            });

            // 提交数据
            admin.req({
                headers: {
                    'RequestVerificationToken': csrfToken
                },
                method: 'POST',
                url: '/settinginfo/create'
                , data: data.field
                , done: function (res) {
                    // console.log(`res=${JSON.stringify(res)}`)
                    layer.close(loading);
                    parent.layui.table.reload('LAY-app-content-list'); // 重载表格
                    if (res.errcode) {
                        layer.open({
                            title: '错误提示'
                            , type: 1
                            , content: '<div style="color: red; padding: 20px; ">' + res.errcode + ':' + res.errmsg + '</div>'
                            , btn: ["确定"]
                        });
                    } else {
                        parent.layer.close(index);
                    }
                }
            });
        });
    })
</script>
